<div class="modal-header">
    <h3 class="modal-title">Add a text</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-12 col-md-offset-0 form-group">
            <label class="col-md-3 control-label form-group-addon">Text</label>
            <div class="col-md-9">
                <textarea class="form-control main-text autofocus" data-ng-model="textProps.text"></textarea>
            </div>
        </div> <br>
        <div class="col-md-12 col-md-offset-0 form-group">
            <label class="col-md-3 control-label form-group-addon">Font Size</label>
            <div class="col-md-9">
                <input type="number" min="0" class="form-control text_font_size" value="12" data-ng-model="textProps.fontSize">
            </div>
        </div> <br>
        <div class="col-md-12 col-md-offset-0 form-group">
            <label class="col-md-3 control-label form-group-addon">Font Style</label>
            <div class="col-md-9">
                <select class="form-control text-font-style-select"  data-ng-model="textProps.fontStyle">
                </select>
            </div>
        </div> <br>
        <div class="col-md-12 col-md-offset-0 form-group">
            <label class="col-md-3 control-label form-group-addon">Font Color</label>
            <div class="col-md-9">
                <input type="color" class="form-control text_font_color" data-ng-model="textProps.fontColor">
            </div>
        </div> <br>
        <div class="col-md-12 col-md-offset-0 form-group">
            <label class="col-md-3 control-label form-group-addon">Background Color</label>
            <div class="col-md-9">
                <input type="color" class="form-control text_background_color" data-ng-model="textProps.bgColor">
            </div>
        </div> <br>
    </div>    
</div>
<div class="modal-footer">
    <div class="col-md-8" >
        <div class="progress" ng-show="runningProgress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                <span class="sr-only"></span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <button class="btn btn-success btn-flat" type="button" data-ng-click="addText()">Add</button>
        <button class="btn btn-dander btn-flat" type="button" data-ng-click="closeModal()">Close</button>
    </div>
    <div ng-show="gotError">
        <p class="text-center">{{errorText}}</p>
    </div>
</div>

<form id="main-modal" class="container col-md-12 col-lg-12 add-text-form">
    
    <input  type="text" class="hide left-coordinate" value="' + left + '">
    <input  type="text" class="hide top-coordinate" value="' + top + '">
</form>